<template>
  <div>
    <el-card style="margin: 20px">
        <el-form style="width: 100%" size="small" :inline="true" >
          <el-form-item>
            <el-input placeholder="用户名" v-model="username"></el-input>
          </el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="searchUser">查询</el-button>
          <el-button type="default" size="small" @click="resetUser">清空</el-button>
        </el-form>
        <el-button size="small" type="primary" @click="addUserControl">添加</el-button>
        <el-button size="small" type="danger" disabled>批量删除</el-button>

      <el-table
        ref="multipleTable"
        border
        :data="userControlList"
        tooltip-effect="dark"
        style="width: 100%;margin-top: 20px"
        >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="用户名称"
          width="200px"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色列表"
          width="420">
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="创建时间 "
          width="260">
        </el-table-column>
        <el-table-column
          prop="gmtModified"
          label="更新时间"
          width="260">
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作"
          >
          <template v-slot="{row}">
            <el-button v-has="'btn.User.add'" type="info" size="small" icon="el-icon-user-solid" @click="userControlRole(row)"></el-button>
            <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="updateUserControl(row)"></el-button>

            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @onConfirm="deleteUserControl(row.id)"
            >
              <template #reference>
              <el-button type="danger" style=" margin: 10px 10px" size="small"  icon="el-icon-delete-solid"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px"
        :current-page="currentPage"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="pageSize"
        layout="prev, pager, next,jumper, sizes,total"
        :total="total">
      </el-pagination>
    </el-card>

    <el-dialog
      :title="!userControlInfo.id ? '添加用户' : '修改用户'"
      :visible.sync="dialogVisible"
      width="50%"
      >
      <el-form label-width="80px" :model="userControlInfo">
        <el-form-item label="用户名">
          <el-input v-model="userControlInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="userControlInfo.nickName"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" v-show="!userControlInfo.id">
          <el-input v-model="userControlInfo.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addOrUpDateUserControl">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="设置角色"
      :visible.sync="dialog"
      width="50%"
      >
      <el-form label-width="80px" >
        <el-form-item label="用户名">
          <el-input :value="userControlInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="userAllIds" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item in allRoles" :label="item.id" :key="item.id">{{item.roleName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <template>
            <el-button type="primary" size="small" @click="userControlRoleData" >保存</el-button>
            <el-button size="small" @click="dialog = false" >取消</el-button>
          </template>
        </el-form-item>
      </el-form>

    </el-dialog>
   </div>
</template>

<script>
import {
  reqDeleteUser,
  reqUserControlPageLimit,
  reqUserControlRole,
  reqUserControlSave,
  reqUserControlUpdate, reqUserDoAssign
} from "@/api/userCotrol";
export default {
  name: "User",
  data() {
    return{
      //当前页
      currentPage:1,
      //每页条数
      pageSize:5,
      //总页数
      total:0,
      //用户管理信息
      userControlList:[],
      //控制弹框
      dialogVisible:false,
      //控制权限管理的页面
      dialog:false,
      //收集用户信息
      userControlInfo:{
        id:"",
        username:"",
        nickName:"",
        password:""
      },
      //全选逻辑和分配角色
      checkAll: false,
      userAllIds: [],
      allRoles: [],
      isIndeterminate: true,
      //搜索的数据请求
      username:""
    }
  },
  methods:{
    //请求用户管理分页列表
     async getUserControlData(){
       try {
          const result = await reqUserControlPageLimit(this.currentPage,this.pageSize)
          this.total = result.total
          this.userControlList = result.items
       }catch (e){
         this.$message.error(e.message);
       }
     },
    //控制每页条数改变
      handleSizeChange(val) {
         this.pageSize = val
         this.getUserControlData()
      },
    //控制当前页改变
      handleCurrentChange(val) {
        this.currentPage = val
        this.getUserControlData()
      },
    // 新增
    addUserControl(){
       this.userControlInfo = {
         id:"",
         username:"",
         nickName:"",
         password:""
       }
       this.dialogVisible = true
    },
    //修改
    updateUserControl(row){
        this.dialogVisible = true
        this.userControlInfo = {...row}
    },
    //新增或修改
    async addOrUpDateUserControl(){
      try {
        if(this.userControlInfo.id){
          await reqUserControlUpdate(this.userControlInfo)
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }else {
          await reqUserControlSave(this.userControlInfo)
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }
      } catch (e){
        this.$message.error(this.userControlInfo.id ? '修改失败' : '添加失败');
      }
      this.dialogVisible = false,
      this.getUserControlData()
    },
    //删除逻辑
    async deleteUserControl(id){
       try {
         await reqDeleteUser(id)
         this.$message({
           message: '删除成功',
           type: 'success'
         });
         this.getUserControlData()
       }catch (e){
         this.$message.error(e.message);
       }
    },

    //获取用户管理
    async userControlRole(row){
      this.userControlInfo = row
      this.dialog = true
      try {
        const result = await reqUserControlRole(row.id)
        const {allRolesList,assignRoles} = result
        this.allRoles = allRolesList
        this.userAllIds = assignRoles.map(item=>item.id)
        this.checkAll = allRolesList.length === assignRoles.length;
        this.isIndeterminate = assignRoles.length> 0 && assignRoles.length< allRolesList.length;
      }catch (e){
        this.$message.error(e.message);
      }
    },
    //根据用户管理分配角色
    async userControlRoleData(){
       try {
         const {id} = this.userControlInfo
         console.log(this.userAllIds)
         const roleId = this.userAllIds.join(",")
         await reqUserDoAssign(id,roleId)
         this.$message({
           message: '分配角色成功',
           type: 'success'
         });
       }catch (e){
         this.$message.error(e.message);
       }
        this.dialog = false
        this.getUserControlData()
    },
    //全选时的
    handleCheckAllChange(val) {
      this.userAllIds = val ? this.allRoles.map(item=>item.id) : [];
      this.isIndeterminate = false;
    },
    //全选逻辑
    handleCheckedCitiesChange() {
      const {userAllIds , allRoles} = this
      this.checkAll = userAllIds.length === allRoles.length;
      this.isIndeterminate = userAllIds.length > 0 && userAllIds.length < allRoles.length;
    },
    //搜索逻辑
    async searchUser(){
       try {
         const result =  await reqUserControlPageLimit(this.currentPage,this.pageSize,this.username)
         this.userControlList = result.items
         this.total = result.total
       }catch (e){
         this.$message.error(e.message);
       }
    },
    //重置操作
     async resetUser(){
       this.username = "";
       this.userControlList = []
       await this.getUserControlData()
    }
  },



  mounted() {
    this.getUserControlData()
  }
}
</script>

<style>
</style>
